Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.01.2021, 15:25
Новичок на форуме
Отправить личное сообщение для Konstantin81 Посмотреть профиль Найти все сообщения от Konstantin81
 
Регистрация: 19.01.2021
Сообщений: 8

Почему Promise изначально в состоянии fulfilled?
Помогите пожалуйста разобраться:

Почему async функция, тело которой имеет setTimeout, возвращает Promise в состоянии fulfilled еще до выполнения setTimeout?

Откуда берется значение Promise - '1' ?

Каким должен быть правильный код (при котором Promise перейдет в состояние fulfilled лишь после выполнения setTimeout)?

let out1 = document.querySelector('.out-1');

async function setHtml(ms, out, text) {

	let a = setTimeout(() => out.innerHTML = text, ms);
	return a;
}

console.log(setHtml(2000, out1, 'Запуск №1'));


Весь код
https://codepen.io/konstantinopol/pen/jOVEyGK


____________________

Последний раз редактировалось Konstantin81, 31.01.2021 в 15:30.
Ответить с цитированием
  #2 (permalink)  
Старый 31.01.2021, 15:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,831

Сообщение от Konstantin81
Почему async функция, тело которой имеет setTimeout возвращает Promise в состоянии fulfilled еще до выполнения setTimeout?
Потому что вы возвращает идентификатор таймаута не ожидая его выполнения.

Сообщение от Konstantin81
Откуда берется значение Promise - '1' ?
Это сам идентификатор таймаута.

Сообщение от Konstantin81
Каким должен быть правильный код?
Наверное таким:
let out1 = document.querySelector('.out-1');

function setHtml(ms, out, text) {
    return new Promise(resolve => {
        setTimeout(() => resolve(out.innerHTML = text), ms);
    });
}

setHtml(2000, out1, 'Запуск №1').then(text => {
    console.log(text);
});
Ответить с цитированием
  #3 (permalink)  
Старый 31.01.2021, 15:54
Новичок на форуме
Отправить личное сообщение для Konstantin81 Посмотреть профиль Найти все сообщения от Konstantin81
 
Регистрация: 19.01.2021
Сообщений: 8

Сообщение от Nexus Посмотреть сообщение
Потому что вы возвращает идентификатор таймаута не ожидая его выполнения.


Это сам идентификатор таймаута.


Наверное таким:
let out1 = document.querySelector('.out-1');

function setHtml(ms, out, text) {
    return new Promise(resolve => {
        setTimeout(() => resolve(out.innerHTML = text), ms);
    });
}

setHtml(2000, out1, 'Запуск №1').then(text => {
    console.log(text);
});
Имеется в виду:
1) что функция async не может создать Promise в состоянии pending?
2) что функция async await может вернуть созданный ей самой Promise только в состоянии fulfilled?
3) что функция async возвращает в состоянии pending только те Promise, которые созданы с помощью new Promise или браузером(например fatch)?
Ответить с цитированием
  #4 (permalink)  
Старый 31.01.2021, 15:58
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,831

Konstantin81, вы заострили внимание совсем не на том, на чем нужно из-за этого сделали какие-то дикие выводы.

Разберитесь что делает ваш код, как работает setTimeout, как, собственно, работает async/await.

В вашем коде нет чего-либо, что выполняется асинхронно, поэтому результат всегда - Promise<number>в состоянии «fulfilled».
Ответить с цитированием
  #5 (permalink)  
Старый 31.01.2021, 17:09
Новичок на форуме
Отправить личное сообщение для Konstantin81 Посмотреть профиль Найти все сообщения от Konstantin81
 
Регистрация: 19.01.2021
Сообщений: 8

Сообщение от Nexus Посмотреть сообщение
Konstantin81, вы заострили внимание совсем не на том, на чем нужно из-за этого сделали какие-то дикие выводы.

Разберитесь что делает ваш код, как работает setTimeout, как, собственно, работает async/await.

В вашем коде нет чего-либо, что выполняется асинхронно, поэтому результат всегда - Promise<number>в состоянии «fulfilled».
Я думал setTimeout выполняется асинхронно.
Спасибо Вам!!!
Ответить с цитированием
  #6 (permalink)  
Старый 31.01.2021, 18:19
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,831

Сообщение от Konstantin81
Я думал setTimeout выполняется асинхронно.
Выполнение callback'а этой функции действительно откладывается на определенное время, однако в вашем коде совершенно неважно когда это произойдет и произойдет ли вообще.

Функция setTimeout сразу же возвращает свой идентификатор, поэтому вашей асинхронной функции setHtml вовсе нет нужды ждать выполнения функции обратного вызова, которая была передана в setTimeout.

Как можно воспользоваться async/await вместе с таймаутом и без явного использования Promis'ов - я не представляю.
Ответить с цитированием
  #7 (permalink)  
Старый 31.01.2021, 19:46
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,775

Сообщение от Konstantin81
что функция async возвращает в состоянии pending только те Promise, которые созданы с помощью new Promise или браузером(например fatch)?
А какие еще бывают?
Ответить с цитированием
  #8 (permalink)  
Старый 31.01.2021, 20:11
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 1,013

Сообщение от Konstantin81 Посмотреть сообщение
Имеется в виду:
1) что функция async не может создать Promise в состоянии pending?
2) что функция async await может вернуть созданный ей самой Promise только в состоянии fulfilled?
3) что функция async возвращает в состоянии pending только те Promise, которые созданы с помощью new Promise или браузером(например fatch)?
async функция может вернуть созданный ей самой промис в состоянии pending, если внутри неё делается return значения thenable (то есть любого объекта, у которого есть метод then, или даже примитива, если then добавить ему в прототип)

Последний раз редактировалось Alexandroppolus, 31.01.2021 в 20:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией .height() kos0760 Элементы интерфейса 2 24.05.2017 23:51
помогите разобраться с this uroboros7 jQuery 4 02.01.2015 00:56
помогите разобраться с мега меню tyshka jQuery 4 24.10.2014 21:30
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24